<template>
	<view>
		<!-- <u-navbar  title="员工录入" :is-back="false"   titleColor="#000">
		</u-navbar> -->
		<view class="wrap">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120" :label-position="labelPosition" label="班级" prop="banji_name">
					<u-input :border="border" placeholder="请输入班级" v-model="model.banji_name" type="text"></u-input>
				</u-form-item>
				
				<u-form-item :label-position="labelPosition" label="老师" prop="bumen" label-width="150">
				   <view class="selectXZ">
					   <view class="tags">
					     	<u-tag :text="item.realname" style="margin-right:10rpx;" :closeable="true" mode="plain"  @close="model.teachers.splice(index,1)" v-for="(item,index) in model.teachers" type="info" />
					   </view>
				       <u-icon label="" @click="teachershow = true" size="30" name="arrow-down"></u-icon>
				   </view>
				</u-form-item>
				
			</u-form>
			<u-button @click="submit">提交</u-button>
        </view>
		
		<!-- 弹框 -->
		<u-popup v-model="teachershow" mode="bottom">
			<view class="search">
				<u-search placeholder="姓名" v-model="keyword" @search="search" :show-action="false"></u-search>
			    <view class="searchheghti">
					<view class="search-con" v-for="(item,index) in teacherlist" :key="index">
						<view class="search-name">
							{{item.realname}}
						</view>
						<view class="search-icon">
							<u-icon label="" color="#2979ff" @click="teacherselectConfirm(index)" size="30" name="plus-circle-fill"></u-icon>
						</view>
					</view>	
			    </view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {		
		components:{
			
		},
		data() {
			return {
			keyword:"",	
			//上传图片地址
			baseurl:"",
			model:{
				banji_name:"", //班级
				teachers:[],   //老师列表
			},
			teacherlist: [],
			rules: {
			    	banji_name: [
					{
						required: true,
						message: '请输入班级',
						trigger: 'blur' ,
					},
					{
						min: 2,
						max: 6,
						message: '班级长度在2到5个字符',
						trigger: ['change','blur'],
					}
				]
			},
			teachershow:false, //弹框
			border: false,
			labelPosition: 'left',
			errorType: ['toast'],
			
			}
		},
		onLoad() {
			    this.baseurl =  this.$u.http.config.baseUrl
			    this.search()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//
			search(){
					//老师
					this.$u.post('/api/member/teacherlist', {keyword:this.keyword
							}).then(res => {
						    this.teacherlist = res;			
					});		
			},
			//提交
			 submit() {
				let that  = this; 
				if(that.model.teachers.length == 0){
					this.$u.toast("请选择老师");
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.$u.post('/api/member/addClass',that.model
						).then(res => {
									that.$u.toast("添加成功");
						});
						
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			 },

			//老师选择
			teacherselectConfirm(index) {
				let item = this.teacherlist[index];
				let teachers = this.model.teachers;
				let res= teachers.find(function(value,index,arr){
					if(value && value.id == item.id){
						return true;
					}
				})
				if(res){
					this.$u.toast("您已经添加");
					
				}else{
					 this.model.teachers.push(item)
					 this.$u.toast("添加成功");
				}
				
			},

			borderChange(index) {
				this.border = !index;
			},
			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
		}
	}
</script>

<style lang="scss" scoped>
  .wrap {
  	padding: 30rpx;
  }
  
  .agreement {
  	display: flex;
  	align-items: center;
  	margin: 40rpx 0;
  
  	.agreement-text {
  		padding-left: 8rpx;
  		color: $u-tips-color;
  	}
  }
  .selectXZ{
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
  }
  .tags{
	  flex-grow: 1;
  }
  .search{
	  padding: 30rpx;
	  height: 500rpx;
  }
  .search-con{
	  display: flex;
	  justify-content: space-between;
	  height: 80rpx;
	  align-items: center;
	  padding: 0 20rpx;
  }
  .searchheghti{
	  height: 380rpx;
	  overflow-y: auto;
  }
</style>
